<template>
    <div class="component">
    <Breadcrumb :menulist="[`${componentType == 1 ? '项目' : '产品'}`, '模型属性']" :showSystem="false" showBack></Breadcrumb>
    <el-card class="box-card" shadow="hover">
        <div slot="header" class="tabHeader">
            <el-button class="addPro" icon="el-icon-circle-plus" type="primary" >批量添加模型属性</el-button>
            <el-button class="addPro" icon="el-icon-circle-plus" type="primary" @click="showAddPro">添加模型属性</el-button>
        </div>
      <el-tabs class="modelTabs">
          <el-table
              :data="tableData"
              max-height="600"
              line-height="50"
              border
              :header-cell-style='headerStyle'
              style="width: 100%">
              <!--
                <el-table-column
                    prop="attributeId"
                    label="属性ID"
                    width="100"
                    align="center">
                </el-table-column>
              -->
              <el-table-column
                  prop="attributeCode"
                  label="属性编码"
                  width="200"
                  align="center">
              </el-table-column>
              <el-table-column
                  prop="attributeName"
                  align="center"
                  width="200"
                  label="属性名称">
              </el-table-column>
              <el-table-column
                  prop="indexNo"
                  align="center"
                  width="100"
                  label="IndexNo">
              </el-table-column>
              <el-table-column
                  prop="attributeType"
                  align="center"
                  width="100"
                  label="属性类型">
                  <template slot-scope="scope">
                      <span>{{scope.row.attributeType ? scope.row.attributeType.displayName : ''}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="idCreateType"
                  align="center"
                  width="200"
                  label="主键生成方式">
                   <template slot-scope="scope">
                      <span>{{scope.row.idCreateType ? scope.row.idCreateType.displayName : ''}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="valueClass"
                  align="center"
                  width="200"
                  label="值类型">
                  <template slot-scope="scope">
                      <span>{{scope.row.valueClass ? scope.row.valueClass.displayName : ''}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="dataType"
                  align="center"
                  width="100"
                  label="数据类型">
                  <template slot-scope="scope">
                      <span>{{scope.row.dataType ? scope.row.dataType.displayName : ''}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="dataLength"
                  align="center"
                  width="200"
                  label="数据长度">
              </el-table-column>
              <el-table-column
                  prop="dataScale"
                  align="center"
                  width="100"
                  label="精度">
              </el-table-column>
              <el-table-column
                  prop="isNull"
                  align="center"
                  width="100"
                  label="是否为空">
                  <template slot-scope="scope">
                      <span class="percentFont">{{scope.row.isNull ? '是' : '否'}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="isSystem"
                  align="center"
                  width="100"
                  label="是否系统">
                  <template slot-scope="scope">
                      <span class="percentFont">{{scope.row.isSystem ? '是' : '否'}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="isEntity"
                  align="center"
                  width="100"
                  label="是否实体">
                  <template slot-scope="scope">
                      <span class="percentFont">{{scope.row.isEntity ? '是' : '否'}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="isPersist"
                  align="center"
                  width="100"
                  label="是否持久化">
                  <template slot-scope="scope">
                      <span class="percentFont">{{scope.row.isPersist ? '是' : '否'}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="databaseName"
                  align="center"
                  width="250"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </el-tabs>

      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="slot, total, sizes, prev, pager, next, jumper"
        :total="total">
        <el-button icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getModelsAttributesList()"></el-button>
      </el-pagination>
    </el-card>


    <!-- 添加模型属性 -->
    <el-dialog :title="dialogTitle"  :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="60%">
      <el-row>
        <el-form :model="form"  :rules="rules" ref="form" label-width="100px">
          <el-col :span="24" v-if="dialogTitle === '删除模型属性'">
            <el-form-item label="删除提示信息">
              <div style="color: #d93a49;">{{deleteCheckContent}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="属性编码" prop="attributeCode">
                <el-input v-model="form.attributeCode" placeholder="请输入属性编码" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'"></el-input>
              </el-form-item>
              <el-form-item label="属性名称" prop="attributeName">
                <el-input v-model="form.attributeName" placeholder="请输入属性名称" :disabled="deleteDisabled"></el-input>
              </el-form-item>
              <el-form-item label="所属模型" prop="modelName">
                <el-input v-model="form.modelName" placeholder="请选择所属模型" disabled></el-input>
              </el-form-item>
              <el-form-item label="所属组件" prop="componentName">
                <el-input v-model="form.componentName" placeholder="请选择所属组件" disabled></el-input>
              </el-form-item>
              <el-form-item label="所属模块" prop="moduleName">
                <el-input v-model="form.moduleName" placeholder="请选择所属模块" disabled></el-input>
              </el-form-item>
              <el-form-item label="所属项目" prop="solutionName" v-if="componentType === 1">
                <el-input v-model="form.solutionName" placeholder="请选择所属项目" disabled></el-input>
              </el-form-item>
              <el-form-item label="所属产品" prop="topSolutionName">
                <el-input v-model="form.topSolutionName" placeholder="请选择所属产品" disabled></el-input>
              </el-form-item>
              <!--
              <el-form-item label="indexNo" prop="indexNo">
                  <el-input v-model="form.indexNo" placeholder="请填写排序" :disabled="deleteDisabled"></el-input>
              </el-form-item>
              -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="属性类型" prop="attributeType">
              <el-select v-model="form.attributeType" placeholder="请选择属性类型" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'" style="width: 100%;">
                <el-option value="0" label="Normal"></el-option>
                <el-option value="1" label="Key"></el-option>
                <el-option value="2" label="Code"></el-option>
                <el-option value="3" label="Name"></el-option>
                <el-option value="4" label="DocNo"></el-option>
                <el-option value="5" label="Parent"></el-option>
                <el-option value="6" label="Extend"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主键生成方式" prop="idCreateType">
              <el-select v-model="form.idCreateType" placeholder="请选择主键生成方式" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'" style="width: 100%;">
                <el-option value="0" label="None"></el-option>
                <el-option value="1" label="Input"></el-option>
                <el-option value="2" label="DatabaseAutocreact"></el-option>
                <el-option value="3" label="Uuid"></el-option>
                <el-option value="4" label="IDCreator"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值类型" prop="valueClass">
                <el-select 
                  v-model="form.valueClass" 
                  placeholder="请选择值类型" 
                  :disabled="deleteDisabled || dialogTitle == '编辑模型属性'"
                  style="width: 100%;"
                  @change="onChangeValueClass"
                  >
                  <el-option value="0" label="Nomal"></el-option>
                  <el-option value="1" label="Enum"></el-option>
                  <el-option value="2" label="Entity"></el-option>
                  <el-option value="3" label="Map"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型选择" prop="typeDefineId">
                <el-select 
                  clearable
                  autocomplete
                  filterable
                  v-model="form.typeDefineId" 
                  placeholder="请选择类型选择" 
                  :disabled="!form.valueClass || deleteDisabled || dialogTitle == '编辑模型属性'"
                  style="width: 100%;"
                  @change="onChangeTypeDefineId"
                >
                  <el-option
                    v-for="item in typedefineList"
                    :key="item.typeDefineId"
                    :label="item.typeDefineName"
                    :value="item.typeDefineId">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数据类型" prop="dataType">
              <el-select v-model="form.dataType" placeholder="请选择数据类型" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'" style="width: 100%;">
                <el-option
                  v-for="item in dataTypeArr"
                  :key="item.code"
                  :label="item.displayName"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据长度" prop="dataLength">
                <el-input v-model="form.dataLength" placeholder="请填写数据长度" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'"></el-input>
            </el-form-item>
           <el-form-item label="精度" prop="dataScale">
                <el-input v-model="form.dataScale" placeholder="请填写精度" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'"></el-input>
            </el-form-item>
            <el-form-item label="是否可空" prop="isNull">
                <el-radio-group v-model="form.isNull" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否系统" prop="isSystem">
                <el-radio-group v-model="form.isSystem" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否持久化" prop="isPersist">
                <el-radio-group v-model="form.isPersist" :disabled="deleteDisabled || dialogTitle == '编辑模型属性'">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="dialogTitle === '添加模型属性'" @click="handleSave('form')">保 存</el-button>
        <el-button type="primary" v-if="dialogTitle === '编辑模型属性'" @click="__handleEdit('form')">保 存</el-button>
        <el-button type="primary" plain v-if="dialogTitle === '添加模型属性'" @click="resetForm('form')">清 除</el-button>
        <el-button type="danger" plain v-if="dialogTitle === '删除模型属性'" @click="handleDelete('form')">删 除</el-button>
        <el-button @click="handleCancel('form')">取 消</el-button>
      </div>
    </el-dialog>

    </div>
</template>


<script>
import {request, url} from "@/api/request";
import Breadcrumb from "@/components/Breadcrumb.vue";

export default {
  name: "ModelAttributes",
  components: {
    Breadcrumb
  },
  props: {
    componentType: {
        type: Number,
        default: 1,//1组件，2产品
    },
  },
  data() {
    return {
      headerStyle: {
        "line-height": "40px"
      },
      tableData: [],
      dialogFormVisible: false,
      form: {
        attributeCode: '',
        attributeName: '',
        modelId: '',
        modelName: '',
        componentName: '',
        moduleName: '',
        solutionId: '',
        solutionName: '',
        topSolutionId: '',
        topSolutionName: '',
        indexNo: '',
        attributeType: '',
        idCreateType: '',
        typeDefineId: '',
        typeDefineCode: '',
        valueClass: '',
        dataType: '',
        dataLength: '',
        dataScale: '',
        isNull: '0',
        isSystem: '0',
        isPersist: '0',
      },
      rules: {
        attributeCode: [
          { required: true, message: '请输入属性编码', trigger: 'change' },
        ],
        attributeName: [
          { required: true, message: '请输入属性名称', trigger: 'change' },
        ],
      },
      dataTypeArr: [
        {
          code: '0',
          displayName: 'Bool'
        },{
          code: '1',
          displayName: 'Date'
        },{
          code: '2',
          displayName: 'DateTime'
        },{
          code: '3',
          displayName: 'Integer'
        },{
          code: '4',
          displayName: 'Number'
        },{
          code: '5',
          displayName: 'String'
        },{
          code: '6',
          displayName: 'StringLage'
        },{
          code: '7',
          displayName: 'Binary'
        },
      ],
      showComp: false,
      treeData: [],
      treedefaultProps: {
        children: 'childs',
        label: 'label'
      },
      defaultComponentName: '',
      pageNum: 0,
      pageSize: 10,
      total: 0,
      dialogTitle: '添加模型属性',
      deleteCheckContent: '',
      deleteDisabled: false,

      defaultModelId: '',
      defaultSolutionId: '',
      typedefineList: [], //  类型选择列表
    };
  },

  mounted() {
  
  },

  created() {
    let opiton = this.getLocationParams(location.href.split('?')[1])
    console.log(opiton);
    this.defaultModelId = opiton.modelId;
    this.defaultSolutionId = opiton.solutionId;
    this.getModelsAttributesList();

  },

  methods: {

    // 查询列表
    getModelsAttributesList() {
      let defaultModelId = this.defaultModelId;
      let defaultSolutionId = this.defaultSolutionId;
      let params = {
        currentPage: this.pageNum,
        rows: this.pageSize,
        solutionId: defaultSolutionId
      }
      request(`${url.modelattributesList}/${defaultModelId}`,{
          method:'GET',
          data: params
      },res=>{
        console.log(res)
          this.tableData = res.data.list;
          // this.pageNum = res.data.pageNum;
          // this.pageSize = res.data.pageSize;
          this.total = res.data.total;
      })
    },

    handleSizeChange(val) {
        this.pageSize = val;
        this.pageNum = 1;
        this.getModelsAttributesList();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getModelsAttributesList();
      },


    showAddPro() {
      this.dialogTitle = '添加模型属性';
      this.dialogFormVisible = true;
      this.deleteDisabled = false;
      this.attributeId = '';
      this.form.attributeCode = '';
      this.form.attributeName = '';
      this.form.modelCode = '';
      this.form.modelName = '';
      this.form.modelId = '';
      this.form.indexNo = '';
      this.form.attributeType = '';
      this.form.idCreateType = '';
      this.form.valueClass = '';
      this.form.dataType = '';
      this.form.dataLength = '';
      this.form.dataScale = '';
      this.form.isNull = '0';
      this.form.isSystem = '0';
      this.form.isPersist = '0';

      this.getModelsDefault();
      
    },

    // 获取默认组件
    getModelsDefault() {
      request(`${url.modelattributesDefault}/${this.defaultModelId}`,{
          method:'GET',
          data: {}
        },res=>{
          console.log(res)
          let data = res.data;
          this.form.componentCode = data.componentCode;
          this.form.componentId = data.componentId;
          this.form.componentName = data.componentName;
          this.form.modelCode = data.modelCode;
          this.form.modelId = data.modelId;
          this.form.modelName = data.modelName;
          this.form.moduleCode = data.moduleCode;
          this.form.moduleId = data.moduleId;
          this.form.moduleName = data.moduleName;
          this.form.solutionCode = data.solutionCode;
          this.form.solutionId = data.solutionId;
          this.form.solutionName = data.solutionName;
          this.form.topSolutionCode = data.topSolutionCode;
          this.form.topSolutionId = data.topSolutionId;
          this.form.topSolutionName = data.topSolutionName;
        })
    },

    // 保存
    handleSave(formName) {
      console.log(this.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let optionDataType = this.dataTypeArr.find(item => item.displayName == this.form.dataType).code;

          let parmas = {
              attributeCode: this.form.attributeCode,
              attributeName: this.form.attributeName,
              modelId: this.form.modelId,
              modelName: this.form.modelName,
              componentName: this.form.componentName,
              moduleName: this.form.moduleName,
              solutionId: this.form.solutionId,
              solutionName: this.form.solutionName,
              topSolutionId: this.form.topSolutionId,
              topSolutionName: this.form.topSolutionName,
              indexNo: this.form.indexNo,
              attributeType: this.form.attributeType,
              idCreateType: this.form.idCreateType,
              typeDefineId: this.form.typeDefineId,
              typeDefineCode: this.form.typeDefineCode,
              valueClass: this.form.valueClass,
              dataType: optionDataType,
              dataLength: this.form.dataLength,
              dataScale: this.form.dataScale,
              isNull: this.form.isNull,
              isSystem: this.form.isSystem,
              isPersist: this.form.isPersist,
          };
          request(`${url.modelattributes}`,{
              method:'POST',
              data: parmas
          },res=>{
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.dialogFormVisible = false;
              this.getModelsAttributesList();
              this.$refs.form.resetFields();  // 重置 form表单
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleCancel(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },

    // 编辑
    handleEdit(index, row) {
      console.log(row);
      this.dialogTitle = '编辑模型属性';
      this.dialogFormVisible = true;
      this.deleteDisabled = false;

      request(`${url.modelattributes}/${row.attributeId}`,{
          method:'get',
          data: {}
      },res=>{
        console.log(res)
        let data = res.data;
        this.attributeId = data.attributeId;
        this.form.attributeCode = row.attributeCode;
        this.form.attributeName = row.attributeName;
        this.form.modelCode = row.modelCode;
        this.form.modelName = row.modelName;
        this.form.modelId = row.modelId;
        this.form.indexNo = row.indexNo;
        this.form.attributeType = data.attributeType;
        this.form.idCreateType = data.idCreateType;
        this.form.valueClass = data.valueClass;
        this.form.dataType = data.dataType;
        this.form.dataLength = row.dataLength;
        this.form.dataScale = row.dataScale;
        this.form.isNull = String(data.isNull);
        this.form.isSystem = String(data.isSystem);
        this.form.isPersist = String(data.isPersist);
        this.form.typeDefineId = data.typeDefineName;

        this.getModelsDefault();
      })
    },

    __handleEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)

          let parmas = {
            attributeCode: this.form.attributeCode,
            attributeName: this.form.attributeName,
            modelId: this.form.modelId,
            modelName: this.form.modelName,
            componentName: this.form.componentName,
            moduleName: this.form.moduleName,
            solutionId: this.form.solutionId,
            solutionName: this.form.solutionName,
            topSolutionId: this.form.topSolutionId,
            topSolutionName: this.form.topSolutionName,
            indexNo: this.form.indexNo,
            attributeType: this.form.attributeType.code,
            idCreateType: this.form.idCreateType.code,
            typeDefineId: this.form.typeDefineId,
            typeDefineCode: this.form.typeDefineCode,
            valueClass: this.form.valueClass.code,
            dataType: this.form.dataType.code,
            dataLength: this.form.dataLength,
            dataScale: this.form.dataScale,
            isNull: this.form.isNull,
            isSystem: this.form.isSystem,
            isPersist: this.form.isPersist,
          };
          console.log(parmas)
          request(`${url.modelattributes}/${this.attributeId}`,{
              method:'PUT',
              data: parmas
          },res=>{
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.dialogFormVisible = false;
              this.getModelsAttributesList();
              this.$refs.form.resetFields();  // 重置 form表单
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    // 删除
    handleDelete (index, row) {
      console.log(row)
      
      this.dialogTitle = '删除模型属性';
      this.deleteDisabled = true;
      this.dialogFormVisible = true;
      request(`${url.modelattributes}/${row.attributeId}`,{
          method:'get',
          data: {}
      },res=>{
        console.log(res)
        let data = res.data;
        this.attributeId = data.attributeId;
        this.form.attributeCode = row.attributeCode;
        this.form.attributeName = row.attributeName;
        this.form.modelCode = row.modelCode;
        this.form.modelName = row.modelName;
        this.form.modelId = row.modelId;
        this.form.indexNo = row.indexNo;
        this.form.attributeType = data.attributeType;
        this.form.idCreateType = data.idCreateType;
        this.form.valueClass = data.valueClass;
        this.form.dataType = data.dataType;
        this.form.dataLength = row.dataLength;
        this.form.dataScale = row.dataScale;
        this.form.isNull = String(data.isNull);
        this.form.isSystem = String(data.isSystem);
        this.form.isPersist = String(data.isPersist);
        this.form.typeDefineId = data.typeDefineName;

        this.getModelsDefault();
        this.deleteCheck(row.modelId);
      })
  

      
    },

    // check delete
    deleteCheck(modelId) {
      console.log(modelId);
      request(`${url.modelattributesDeleteCheck}/${modelId}`,{
          method:'GET',
          data: {}
      },res=>{
        console.log(res);
        this.deleteCheckContent = res.code + res.message;
      }, err => {
        console.log(err);
        this.deleteCheckContent = err.code + err.message;
      })
    },

    //  确认删除 
    __handleDelete () {
      let attributeId = this.attributeId;
      request(`${url.modelattributes}/${attributeId}`,{
          method:'DELETE',
          data: {}
      },res=>{
          this.dialogFormVisible = false;
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.getModelsAttributesList();
          this.$refs.form.resetFields();  // 重置 form表单
      })
    },

    // 类型选择接口
    typedefine(valueClass) {
      let defaultSolutionId = this.defaultSolutionId;
      let parmas = {
        valueClass: valueClass,
        typeDefineCode: '',
        typeDefineName: '',
        solutionId: defaultSolutionId
        // solutionId: '68635631189753856',
      }
      request(`${url.typedefine}`,{
          method:'GET',
          data: parmas
      },res=>{
        console.log(res)
        this.typedefineList = res.data;
      })
    },

    onChangeValueClass(value) {
      this.typedefine(value);
    },

    onChangeTypeDefineId(value) {
      let option = this.typedefineList.find(item => item.typeDefineId === value);
      console.log(option);
      this.form.dataLength = option.dataLength;
      this.form.dataScale = option.dataScale;
      // this.form.dataType = option.dataType;
      this.form.dataType = this.dataTypeArr.find(item => item.code == option.dataType).displayName;

    }


  }
};
</script>

<style scoped>

.modelTabs {
  padding: 0 20px;
}

.tabHeader {
  height: 40px;
}

.addPro {
  float: right;
  margin-right: 20px;
}

.openComp {
  margin-left: 20px;
}

.drawerTitle {
  line-height: 70px;
  font-size: 20px;
  margin-left: 30px;
}

.tree {
  margin-left: 30px;
  
}
</style>
